<template>
  <div class="page">
    <van-nav-bar title="提现审批" left-arrow @click-left="$router.go(-1)"/>
    <!-- <top-search v-if="$store.getters.ifAdmin" @search="searchFunc" v-model="search.content" bgcolor="#fff"></top-search> -->
    <van-tabs v-model="search.roleType" @change="searchFunc" color="#517df1" title-active-color="#517df1" title-inactive-color="#9d9d9d">
      <van-tab v-for="(item, index) in option.roleType" :key="index" :name="item.value">
        <template #title>
          <div>{{ item.label }}</div>
        </template> 
      </van-tab>
    </van-tabs>
    <van-list class="page-content" v-model="page.loading" :finished="page.finished" finished-text="没有更多了" @load="getList">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <div class="list-group flex-row" style="padding-top: 0.25rem; padding-bottom: 0.25rem;">
          <span class="font-black" style="font-size: 14px;">{{ item.userName }}</span>
          <span class="font-red" style="font-size: 14px;">¥{{ item.withdrawalAmount }}</span>
        </div>
        <div class="list-group justify">
          <div class="list-row">
            <span class="label-text">申请时间</span>
            <span>{{ item.createTime }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">申请状态</span>
            <span>{{ item.actualAmount ? '已到账' : '待审批' }}</span>
          </div>
        </div>
        <div class="list-group justify" v-if="$store.getters.ifAdmin">
          <div class="list-row">
            <span class="label-text">用户角色</span>
            <span>{{ [ '管理员', '代理', '业务员', '商户', '服务商' ][item.userType] }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">用户ID</span>
            <span>{{ item.userId }}</span>
          </div>
        </div>
        <div class="list-group justify" v-if="item.actualAmount">
          <div class="list-row">
            <span class="label-text">到账时间</span>
            <span>{{ item.actualAmount }}</span>
          </div>
          <div class="list-row">
            <span class="label-text">到账金额</span>
            <span class="font-red">{{ item.actualAmount }}元</span>
          </div>
          <div class="list-row">
            <span class="label-text">手续费率</span>
            <span class="font-red">{{ (item.withdrawalAmount - item.actualAmount) / item.withdrawalAmount * 100 }}%</span>
          </div>
        </div>
        <div class="list-group justify" v-if="item.wxErrorCode">
          <div class="list-row">
            <span class="label-text">失败原因</span>
            <span class="font-red">{{ item.wxErrorCode }}</span>
          </div>
        </div>
        <div class="list-group around" style="padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 14px;">
          <div class="list-row">
            <span @click="shenghe(item, 2, index)" class="font-org">拒绝</span>
            <span @click="shenghe(item, 1, index)" class="font-blue">通过</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: {
        roleType: 1
      },

      page: {
        page: 1,
        size: 10,
        loading: false,
        finished: false
      },

      option: {
        roleType: [
          { value: 1, label: '代理' },
          { value: 4, label: '服务商' },
          { value: 3, label: '商户' },
        ]
      },

      list: []
    };
  },
  methods: {
    getList() {
      let sPage = JSON.parse(JSON.stringify(this.page));
      let page = sPage.page, size = sPage.size;
      this.page.loading = true;
      
      let search = JSON.parse(JSON.stringify(this.search));
      let query = { page, size };
      let body = { withdrawalStatus: 0, roleType: search.roleType };

      this.$axios.post('/api/WithdrawController/getWithdrawList', { 
        query, body
      }).then(res => {
        let json = res || {}; 
        let list = json.list || [];
        this.list.push( ...list );
        let finished = json.isLastPage ? true : false;
        this.page = { ...sPage, page: sPage.page + 1, loading: false, finished };
      }).catch(err => {
        this.page = { ...sPage, loading: false, finished: true };
      });
    },
    searchFunc() {
      this.page = { page: 1, size: 10, loading: false, finished: false };
      this.list = [];
      this.getList();
    },
    shenghe(item, withdrawalStatus, index) {
      this.$axios.post('/api/WithdrawController/auditWithdraw', {  
        query: { withdrawalStatus, withdrawalRecordId: item.withdrawalRecordId }
      }).then(res => {      
        if (withdrawalStatus == 1) this.$toast('已通过该申请');
        else this.$toast('已拒绝该申请');
        this.list.splice(index, 1);
      });
    }
  },
  mounted() { 
  }
};
</script>